<template>
	<view class="u-page">
		<view class="u-demo-block">
			<!-- <text class="u-demo-block__title">分类</text> -->
			<text style="font-weight: 700;margin: 20rpx;font-size: 45rpx;">{{name}}</text>
			<view style="margin-top=20rpx">
				<view style="align-items: flex-start;margin: 20rpx 0rpx 0 20rpx;">
					<view style="width: 500rpx;height: 420rpx;float: left;" v-if="infor.length>0">
						<image :src="infor[0]" @click="clickImg1(infor)" style="width: 500rpx;height: 420rpx;"></image>
					</view>
					<view class="ualbum" style="float: right;margin-right: 20rpx;" >
						<u-album v-if="infor.length>0" maxCount="2" rowCount="1"  multipleSize="180rpx" singleSize="200rpx" :urls="infor"></u-album>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				albumWidth: 0,
				get_img: this.$get_img,
				infor: [],
				name: "",
				getallalbum:{},
				image:[]
			}
		},
		onShow() {
			//渲染先后顺序
		},
		onLoad() {
			
			let infor=uni.getStorageSync("album")
			   this.name=infor.name
			   this.image = infor.image
			   let that=this
			  //forEach渲染异步
			   that.image.forEach(function(value){
			    that.infor.push(that.get_img+value)
			   })
			    console.log("image:",that.infor)
			   

		},
		methods: {
			clickImg1(url) {
				uni.previewImage({
					urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

<style>
	.album {
		align-items: flex-start;
		margin: 20rpx 0rpx 0 20rpx;
		background-color: #0081FF;

	}

	.u-demo-block__content {
		margin-top: 20rpx;

	}

	.u-demo-block__title {
		font-weight: 700;
		margin: 20rpx;
		font-size: 45rpx;
	}

	.avatar {

		padding: 5px;
		border-radius: 3px;
	}

	.content {
		margin-left: 10px;
		flex: 1;
	}

	.big image {
		width: 500rpx;
		height: 420rpx;
		float: left;
	}

	.ualbum {
		float: right;
	}
</style>
